body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; -webkit-overflow-scrolling: touch; }
body, button, input, select, textarea { font: 14px/1.5 tahoma, Verdana, arial, "microsoft yahei","sim sun"; *line-height: 1.5; color: #333; -ms-overflow-style: scrollbar; }
button, input, select, textarea { font-size: 100%; }
a { color: #333; text-decoration: none; outline: none; transition: color 0.1s;}
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img, area, a { border: 0; outline: 0; }
address, caption, cite, code, dfn, em, th, var, i { font-style: normal; font-weight: normal; }
code, kbd, pre, samp { font-family: courier new,courier,monospace; }
ol, ul { list-style: none; }
body { background: #fff; }
small { font-size: 12px; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
legend { color: #000; }
a, input { -webkit-tap-highlight-color: rgba(0,0,0,0); }
input, textarea, button, select { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-appearance: none; -moz-appearance: none; border-radius: 0; }

@media screen and (max-device-width: 828px) {
    body { -webkit-text-size-adjust: none; }
}

/*颜色*/
.orange, a.orange { color: #ff6700; }
.orange-bg { background-color: #ff6700; }
.grey, a.grey { color: #505050; }
.grey-bg { background-color: #505050; }
.grey-6, a.grey-6 { color: #6b6b6b; }
.grey-6-bg { background-color: #6b6b6b; }
.grey-9, a.grey-9 { color: #9c9c9c; }
.grey-9-bg { background-color: #9c9c9c; }
.grey-d, a.grey-d { color: #dfdfdf; }
.grey-d-bg { background-color: #dfdfdf; }
.grey-e, a.grey-e { color: #efefef; }
.grey-e-bg { background-color: #efefef; }
.grey-f, a.grey-f { color: #f5f5f5; }
.grey-f-bg { background-color: #f5f5f5; }
.black, a.black { color: #333; }
.black-bg { background-color: #333; }
.light, a.light { color: #fff; }
.light-bg { background-color: #fff; }
.red, a.red { color: #e12e2e; }
.red-bg { background-color: #e12e2e; }
.light-red, a.light-red { color: #ff5050; }
.light-red-bg { background-color: #ff5050; }
.orange-red, a.orange-red { color: #ff4e00; }
.orange-red-bg { background-color: #ff4e00; }
.yellow, a.yellow { color: #fbcb30; }
.yellow-bg { background-color: #fbcb30; }
.orange-yellow, a.orange-yellow { color: #fd9712; }
.orange-yellow-bg { background-color: #fd9712; }
.green, a.green { color: #5dc800; }
.green-bg { background-color: #5dc800; }
.light-green, a.light-green { color: #8fd14c; }
.light-green-bg { background-color: #8fd14c; }
.blue, a.blue { color: #3caaff; }
.blue-bg { background-color: #3caaff; }
.light-blue, a.light-blue { color: #7597dc; }
.light-blue-bg { background-color: #7597dc; }
.pink, a.pink { color: #fb5c9b; }
.pink-bg { background-color: #fb5c9b; }
.purple, a.purple { color: #a776d9; }
.purple-bg { background-color: #a776d9; }
.light-purple, a.light-purple { color: #b394f3; }
.light-purple-bg { background-color: #b394f3; }

.wrapper { max-width: 640px; margin: 0 auto; position: relative; }
.rem-wrap { width: 10rem; margin: 0 auto; position: relative; display: block; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hide { display: none; }
.left { float: left; }
.right { float: right; }
.full-height{height:100%;}
.full-width{width:100%;}
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.clear { clear: both; }
.overflow-hide { overflow: hidden; }
.normal { font-weight: normal; }
.bold { font-weight: bold; }
.font-30 { font-size: 30px; }
.font-24 { font-size: 24px; }
.font-20 { font-size: 20px; }
.font-18 { font-size: 18px; }
.font-16 { font-size: 16px; }
.font-15 { font-size: 15px; }
.font-14 { font-size: 14px; }
.font-12 { font-size: 12px; }
.border-box{box-sizing: border-box;}
.border-top, .border-right, .border-bottom, .border-left { position: relative; border: 0; }
.border-top:before, .border-bottom:after { content: ""; position: absolute; -webkit-transform: scaleY(.5); transform: scaleY(.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.border-left:before, .border-right:after { content: ""; position: absolute; -webkit-transform: scaleX(.5); transform: scaleX(.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.border-top:before { top: 0; left: 0; right: 0; border-top: 1px solid #dfdfdf; }
.border-bottom:after { bottom: 0; left: 0; right: 0; border-bottom: 1px solid #dfdfdf; }
.border-left:before { top: 0; left: 0; bottom: 0; border-left: 1px solid #dfdfdf; }
.border-right:after { bottom: 0; top: 0; right: 0; border-right: 1px solid #dfdfdf; }
.margin { margin: 10px; }
.margin-top { margin-top: 10px; }
.margin-right { margin-right: 10px; }
.margin-bottom { margin-bottom: 10px; }
.margin-left { margin-left: 10px; }
.padding { padding: 10px; }
.padding-top { padding-top: 10px; }
.padding-right { padding-right: 10px; }
.padding-bottom { padding-bottom: 10px; }
.padding-left { padding-left: 10px; }
.text-center { text-align: center; }
.pointer{cursor: pointer;}
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lines-1{text-overflow:ellipsis;-webkit-line-clamp:1;display: -webkit-box;overflow:hidden;-webkit-box-orient: vertical;}
.lines-2{text-overflow:ellipsis;-webkit-line-clamp:2;display: -webkit-box;overflow:hidden;-webkit-box-orient: vertical;}
.nowrap { word-wrap: normal; white-space: nowrap; }
.triangle-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #bbb; display: inline-block; vertical-align: middle; margin: 0 3px; }
.arrow-right { position: relative; display: block; width: 10px; height: 20px; overflow: hidden; }
.arrow-right:before { content: ''; border-width: 10px; border-color: transparent transparent transparent #ccc; display: block; width: 0; height: 0; border-style: dashed solid dashed dashed; }
.arrow-right:after { content: ''; border-width: 10px; border-color: transparent transparent transparent #fff; position: relative; top: -20px; right: 3px; display: block; width: 0; height: 0; border-style: dashed dashed dashed solid; }
.button, a.button { text-decoration: none; background-color: #f3f3f3; border: solid 1px #bbb; border-radius: 3px; font-family: 'Microsoft YaHei UI',SimHei; cursor: pointer; outline: none; color: #333; transition: all ease-in-out .3s; position: relative; overflow: hidden; display: inline-block; vertical-align: middle; }

/****************flexbox**************/
.flex {display:flex;}
.inline-flex {display:inline-flex;}
.flex-center{justify-content: center;align-items: center;}
/*横向或纵向*/
.flex-row {flex-direction:row;}
.flex-col {flex-direction:column;}
.flex-row-reverse {flex-direction:row-reverse;}
.flex-col-reverse {flex-direction:column-reverse;}
.flex-wrap {flex-wrap:wrap;}
/*主轴对齐方式*/
.flex-justify-start {justify-content:flex-start;}
.flex-justify-end {justify-content:flex-end;}
.flex-justify-center {justify-content:center;}
.flex-justify-between {justify-content:space-between;}
.flex-justify-around {justify-content:space-around;}
/*侧轴对齐方式*/
.flex-align-start {align-items:flex-start;}
.flex-align-end {align-items:flex-end;}
.flex-align-center {align-items:center;}
.flex-align-baseline {align-items:baseline;}
.flex-align-stretch {align-items:stretch;}
/*主轴换行时行在侧轴的对齐方式，必须定义flex-wrap为换行*/
.flex-content-start {align-content:flex-start;}
.flex-content-end {align-content:flex-end;}
.flex-content-center {align-content:center;}
.flex-content-between {align-content:space-between;}
.flex-content-around {align-content:space-around;}
.flex-content-stretch {align-content:stretch;}
/*允许子元素收缩*/
.flex-child-grow {flex-grow: 1;}/*允许拉伸*/
.flex-child-shrink {flex-shrink: 1;}/*允许收缩*/
.flex-child-noshrink {flex-shrink: 0;}/*不允许收缩*/
.flex-child-average {flex:1;}/*平均分布，兼容旧版必须给宽度*/
.flex-child-first {order: 1;}/*排第一个*/
/*子元素在侧轴的对齐方式*/
.flex-child-align-start {align-self:flex-start;}
.flex-child-align-end {align-self:flex-end;}
.flex-child-align-center {align-self:center;}
.flex-child-align-baseline {align-self:baseline;}
.flex-child-align-stretch {align-self:stretch;}

.slide-fade-enter-active {transition: all .2s ease-in-out;}
.slide-fade-leave-active {transition: all .2s ease-in-out;}
.slide-fade-enter, .slide-fade-leave-active {transform: translateY(5px);opacity: 0;}
